<template>
  <!-- <div style="height: 100%;"> -->
  <div class="app">
    <div style="flex-grow:1;padding-left: 1px;padding-right: 1px;box-sizing: border-box">
      <el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" class="table" :data="tableData"
        height="50vh">
        <el-table-column prop="title" label="商品">
          <template slot-scope="scope">
            <div style="display: flex;flex-direction: column">
              <span class="shopping_product_title">{{ scope.row.name }}</span>
              <span class="shopping_product_title" style="font-size: 12px">{{ scope.row.spec1 }}</span>
            </div>
          </template>
        </el-table-column>
        <!--  <el-table-column prop="unit" label="单位" align="center" width="60">
        </el-table-column> -->
        <el-table-column prop="quantity" label="数量" width="60">
          <template slot-scope="scope">
            <span>{{scope.row.quantity}}{{scope.row.unit}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="60">
        </el-table-column>
        <!-- <el-table-column prop="discount" label="优惠" width="60">
        </el-table-column> -->
        <el-table-column prop="amount" label="金额" width="60">
          <template slot-scope="scope">
            <span>{{scope.row.amount | price}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="50">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
              移除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="shopping_tatol">
      <!-- <div class="shopping_tatol_left"> -->
      <div class="shopping_tatol_left_box">
        <span class="shopping_tatol_left_title">会员名称：</span>
        <div class="shopping_tatol_left_content" v-if="memberForm != null">
          <span style="font-size: 14px;color: #909399;">{{memberForm.name}}</span>
        </div>
      </div>
      <div class="shopping_tatol_left_box">
        <span class="shopping_tatol_left_title">会员电话：</span>
        <div class="shopping_tatol_left_content" v-if="memberForm != null">
          <span style="font-size: 14px;color: #909399;">{{memberForm.mobile}}</span>
        </div>
      </div>
      <div class="shopping_tatol_left_box">
        <span class="shopping_tatol_left_title">会员余额：</span>
        <div class="shopping_tatol_left_content" v-if="memberForm != null">
          <span style="font-size: 14px;color: red;">{{memberForm.cardBalance}}</span>
        </div>
      </div>
      <div class="shopping_tatol_left_box">
        <span class="shopping_tatol_left_title">客户备注：</span>
        <div class="shopping_tatol_left_content">
          <span style="font-size: 14px;color: #909399;width: 238px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right">{{memoTitle}}</span>
        </div>
      </div>
      <div class="shopping_tatol_left_box" @click="discountClick">
        <span class="shopping_tatol_left_title">店铺优惠：</span>
        <div class="shopping_tatol_left_content">
          <div style="display: flex;justify-content: flex-end;align-items: center;">
            <span style="font-size: 14px;color: red;">{{discount == '0' ?'无优惠':discount}}</span>
            <i v-if="discountType == false && discount != '0'" style="font-size: 14px;color: #909399;margin-left: 5px;" class="el-icon-arrow-down"></i>
            <i v-if="discountType == true && discount != '0'" style="font-size: 14px;color: #909399;margin-left: 5px;" class="el-icon-arrow-up"></i>
          </div>
          <transition name="el-zoom-in-top">
          <div style="display: flex;flex-direction: column;background-color: white;position: absolute;top: 15px;padding-right: 10px;padding-bottom: 10px; border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" v-if="discountType == true">
            <span style="font-size: 14px;color: #909399;margin-top: 10px;text-align: right;display: block;width: 238px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" v-for="item in promotions">{{item.title}}</span>
          </div>
           </transition>
        </div>
      </div>
      <div class="shopping_tatol_left_boxTwo">
        <div class="shopping_tatol_left_contentTwo">
          <span style="font-size: 14px;color:red;margin-left: 5px;margin-bottom: 5px;"><span class="shopping_tatol_left_title" style="color: #909399;">共{{subQuantity}}件 </span>小计:</span>
          <span style="font-size: 30px;color:red;margin-left: 5px;">¥{{amount}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters,
    mapState
  } from 'vuex'
  import variables from '@/styles/variables.scss'
  export default {
    data() {
      return {
        tableIndex: 0,
        discountType:false
      }
    },
    filters: {
      price(value) {
        var toFixedNum = Number(value).toFixed(2);
        var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
        return realVal;
      },
      number(value) {
        var toFixedNum = Number(value).toFixed(0);
        return toFixedNum;
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      isCollapse() {
        return !this.sidebar.opened
      },
      ...mapState({
        sidebar: state => state.app.sidebar,
        device: state => state.app.device,
      }),
      classObj() {
        if (this.sidebar.opened == true && this.device == 'desktop') {
          return 'hideSidebarOne'
        } else {
          return 'hideSidebarTwo'
        }
        return {
          // hideSidebar: this.device === 'desktop',
          mobile: this.device === 'mobile'
        }
      }
    },
    props: [
      'tableData', 'memberForm', 'amount' ,'memoTitle' ,'subQuantity' , 'discount' ,'promotions'
    ],
    methods: {
      handleCurrentChange(val) {
        var _this = this
        if (_this.tableData.length > 0) {
          _this.tableData.forEach(function(item, index) {
            if (item.id == val.id) {
              _this.tableIndex = index
            }
          })
          console.log(_this.tableIndex)
          _this.$emit('tableIndexClick', _this.tableIndex)
        }
      },
      tableIndexTwoClick(data) {
        var _this = this
        _this.tableIndex = data
        this.$refs.singleTable.setCurrentRow(_this.tableData[data]);
      },
      deleteRow(index, data) {
        this.$emit('delClick', index)
      },
      discountClick(){
        if(this.discount != '0'){
          this.discountType = !this.discountType
        }
      }
    }
  }
</script>

<style scoped>
  .app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 350px;
  }

  /* .hideSidebarOne .app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(100vw - 995px);
  }

  .mobile .app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(100vw - 615px);
  } */

  .table {
    width: 350px;
  }

  /* .hideSidebarOne .table{
    width: calc(100vw - 995px);
  }

  .mobile .table {
    width: calc(100vw - 615px);
  } */


  .shopping_product_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shopping_tatol {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dfe6ec;
    /*flex-grow: 1;*/
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
  }

  .shopping_tatol_left {
    flex-grow: 1;
  }

  .shopping_tatol_right {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
  }

  .shopping_tatol_right_price {
    font-size: 80px;
  }

  .shopping_tatol_right_title {
    font-size: 20px;
    margin-left: 4px;
  }

  .shopping_bottom {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }

  .shopping_bottom_title {
    font-size: 16px;
    margin-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .shopping_tatol_left_box {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
  }

.shopping_tatol_left_boxTwo {
    display: flex;
    /* margin-bottom: 10px; */
    justify-content: flex-end;
  }

  .shopping_tatol_left_content {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: flex-end;
    width: 238px;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
  }

  .shopping_tatol_left_contentTwo {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: flex-end;
  }

  .shopping_tatol_left_title {
    font-size: 14px;
  }

  /deep/.el-table__fixed-right::before {
    background-color: white !important;
  }

  /deep/.el-table td {
    border-bottom: 1px solid white !important;
  }

  /deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1) !important;
  }
</style>
